<template>
	<view class="shop">
		<view class="mlist">
			<view class="mson" v-for="item in List" :key="item.id">
				<view class="mbox">
					<view class="simg">
						<image class="img" :src="item.img"></image>
					</view>
					<view class="sname">
						<view class="stom">
							{{item.title}}
						</view>
						<view class="sbom">
							<view class="sleft">
								<span>{{item.time}}</span>
							</view>
							<view class="sright">
								{{item.auther}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				List:[
					{
						id:1,
						img:"../../static/logo.png",
						title:"这是商城购买的信息专区，哈哈哈哈哈哈哈哈哈",
						time:"2020-12-29 10:03:21",
						auther:"Taurus"
					},
					{
						id:2,
						img:"../../static/logo.png",
						title:"这是物流信息信息专区，哈哈哈哈哈哈哈哈哈",
						time:"2020-12-29 10:03:21",
						auther:"Taurus"
					},
					{
						id:3,
						img:"../../static/logo.png",
						title:"这是视频专区信息专区，哈哈哈哈哈哈哈哈哈",
						time:"2020-12-29 10:03:21",
						auther:"Taurus"
					},
					{
						id:4,
						img:"../../static/logo.png",
						title:"这是图片分享的信息专区，哈哈哈哈哈哈哈哈哈",
						time:"2020-12-29 10:03:21",
						auther:"Taurus"
					},
					{
						id:5,
						img:"../../static/logo.png",
						title:"这是留言反馈信息专区，哈哈哈哈哈哈哈哈哈",
						time:"2020-12-29 10:03:21",
						auther:"Taurus"
					},
					{
						id:6,
						img:"../../static/logo.png",
						title:"这是联系我们信息专区，哈哈哈哈哈哈哈哈哈",
						time:"2020-12-29 10:03:21",
						auther:"Taurus"
					},
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
.mlist {
	width: 92%;
	margin-left:4%;
	/* max-width:690rpx; */
	height: auto;
}
.mson {
	border-radius: 12rpx;
}
.mbox {
	padding: 12rpx 2rpx;
	height: 130rpx;
	display: flex;
	justify-content: space-around;
	border-bottom:2px solid #C0C0C0;
	margin-top:10px;
}
.simg {
	width: 164rpx;
	height: 100%;
	border-radius: 12rpx;
	overflow: hidden;
}
.img {
	width: 85%;
	height: 100%;
}
.sname {
	width: 528rpx;
	height: 100%;
}
.stom {  //这部分是标题 我将其设置为超出两行隐藏掉您可根据需求设置为一行
	width: 100%;
	height: 80rpx;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height: 44rpx;
	color: #06121E;
	font-size: 28rpx;
	font-weight: bold;
}
.sbom {
	width: 100%;
	height: 34rpx;
	line-height: 34rpx;
	font-size: 20rpx;
	display: flex;
	justify-content: space-between;
	margin-top: 18rpx;
}
.sleft { 
}
.sright {
}
</style>
